<template>
  <page-layout>
    <div slot="toolbar">
       <el-button size="small" round @click="handleAdd({action:'add'})">新增幻灯片</el-button>
    </div>
    <div class="card-header">首页幻灯设置</div>

    <el-card class="box-card">
      <el-row>
        <el-col :span="24">
          <el-form>
            <el-form-item label="所属栏目">
              <el-select v-model="searchCondition.type" placeholder="请选择">
                <el-option
                  v-for="item in Models"
                  :key="item.value"
                  :label="item.text"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button type="primary" @click="refresh" size="small" style="margin-left: 10px;"> 查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row class="mb20">
        <el-col :span="24">
          <el-table :data="slidesList.content" border stripe style="width: 100%">
            <el-table-column prop="orderIndex" label="排序" width="55" align="center">
            </el-table-column>
            <el-table-column label="幻灯图片" width="210">
              <template slot-scope="scope">
                <image-cover :thumb.sync="scope.row.image" width="187.5px" height="125px" size-type="contain"></image-cover>
              </template>
            </el-table-column>
            <el-table-column label="所属栏目" prop="type" width="200" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.type | keyText('Models')}}</span>
              </template>
            </el-table-column>
            <el-table-column label="标题" prop="title"  align="left">
            </el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)" type="text">编辑</el-button>
                <el-button
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.$index, scope.row)" class="danger-text">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="slidesList.totalElements"
            :page-size="slidesList.size"
            :current-page.sync="currentPage" @current-change="pageChange">
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
      <el-dialog :visible="showBannerEditor" title="添加/编辑幻灯" @close="showBannerEditor = false" width=50%>
        <el-form ref="form" :model="currentSlide" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="currentSlide.title" style="width: 300px;"></el-input>
          </el-form-item>
          <el-form-item label="所属栏目">
            <el-select v-model="currentSlide.type" placeholder="请选择">
              <el-option
                v-for="item in Models"
                :key="item.value"
                :label="item.text"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择图片">
            <image-uploader v-model="currentSlide.image" :max-size="10240" :width="uploadImgAttr.width" :height="uploadImgAttr.height" ></image-uploader>
          </el-form-item>
          <el-form-item label="排序">
            <el-input v-model="currentSlide.orderIndex" type="number" style="width: 80px;"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <editor v-model="currentSlide.content" height="300px"></editor>
          </el-form-item>
          <el-form-item>
            <el-button size="small" round type="primary" @click="saveBanner">保存</el-button>
            <el-button size="small" round type="default" @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
        <!--{{currentBanner}}-->
      </el-dialog>

  </page-layout>
</template>
<script>
import PageLayout from "@/components/page-layout";
import ImageUploader from "@/components/image-uploader";
import ImageCover from "@/components/image-cover";
import Editor from "@/components/editor";

import { mapGetters } from "vuex";
import Status from "@/libs/status";
export default {
  beforeRouteEnter(to, from, next) {
    next();
  },
  created() {
    this.refresh({ pageIndex: 0 });
  },
  mounted() {},
  data() {
    return {
      currentPage: 1,
      showPreview: false,
      showBannerEditor: false,
      detailContent: "",
      action: "",
      Models: Status.Models
    };
  },
  computed: {
    ...mapGetters({
      slidesList: "slidesList",
      currentSlide: "currentSlide",
      searchCondition: "searchCondition",
      uploadImgAttr: "uploadImgAttr"
    })
  },
  methods: {
    pageChange(val) {
      this.refresh({ pageIndex: val - 1 });
    },
    handleAdd(param) {
      this.action = param.action;
      this.$store.commit("INIT_CURRENT_SLIDE");
      this.showBannerEditor = true;
    },
    handleEdit(index, row) {
      this.$store.commit("UPDATE_CURRENT_SLIDE", row);
      this.showBannerEditor = true;
      this.action = "edit";
    },
    handleDelete(index, row) {
      this.$confirm("确认删除该幻灯片了?", "提示", {})
        .then(() => {
          this.$store.dispatch("deleteSlideS", { id: row.id }).then(ret => {
            this.refresh({ pageIndex: 0 });
            this.$notify({
              title: "删除成功",
              type: "success"
            });
          });
        })
        .catch(() => {});
    },
    saveBanner() {
      this.$store.dispatch("addOrUpdateSlideS", this.currentSlide).then(ret => {
        this.showBannerEditor = false;
        this.refresh({ pageIndex: 0 });
        this.$notify({
          title: "保存成功",
          type: "success"
        });
      });
    },
    cancel() {
      this.showBannerEditor = false;
    },
    refresh(param) {
      if (param.pageIndex === undefined) {
        this.searchCondition.pageIndex = 0;
      } else {
        this.searchCondition.pageIndex = param.pageIndex;
        this.searchCondition.pageSize = 5;
      }
      this.$store
        .dispatch("getSlidePageS", this.searchCondition)
        .then(ret => {});
    }
  },
  components: {
    PageLayout,
    ImageUploader,
    ImageCover,
    Editor
  }
};
</script>
<style lang="less">
</style>
